<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="添加银行卡" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <nav-bar :title="'添加银行卡'" @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <!--pages/member/addBank/addBank.wxml-->
        <div style="overflow-x:hidden;" class="add-warp">
        <!-- 持卡人 -->
         <van-field v-model="u_name" label="持卡人" clearable placeholder="请输入持卡人姓名" input-align="left" @input="checkForm"></van-field>

         <!-- 卡号 -->
          <van-field v-model="bankcard_number" label="银行卡号" :error="iscardError" type="number" maxlength="19" clearable placeholder="请输入银行卡号" input-align="left" @input="checkForm"></van-field>
          <!-- 所在银行 -->
          <div style="position:relative;">
          <div style="position:absolute;top:0;left:0;width:800px;height:50px;z-index:10;" @click="onbankList"></div>
            <van-field readonly v-model="bank_name" label="所在银行" clearable placeholder="请选择所在银行" input-align="left" icon="arrow" @click-right-icon="onbankList">
          </van-field>
          <van-popup position="bottom" v-model="showPopup" bind:click-overlay="closePopup">
           <!-- <div style="position:fixed;top:0;left:0;"> -->
           <div class='bank-popup-card'><van-icon name="cross" @click="closePopup" class="close-card" size="25px"/><div class="bank-popup-title">所在银行</div>
          </div>
          <div class="bank_list_box">
            <div class='bank-list' v-for="(item, index) in bankList" :key="index" @click="bindGo(item)">
             <div class="bank-item-text">
              <img :src="'https://mjmh.meijiameihuo.com/wechat/images/bank/'+item.bank_code+'_logo.png'" class="bank-img" alt="">
              <div class="bank-item-text">{{item.bank_name}}</div>
            </div>
          </div>
        </div>
          <!-- </div> -->
          </van-popup>
        </div>
          <!-- 预留号码 -->
           <van-field v-model="mobile" label="预留手机号" :error="ismobError" type="number" maxlength="11" clearable placeholder="请输入银行预留手机号" input-align="left" @input="checkForm"></van-field>
           <van-field v-model="user_id_no" label="身份证号" clearable placeholder="请输入身份证号" maxlength="18" input-align="left" @input="checkForm"></van-field>
           <van-button :disabled="!isStatus" size="large" @click="beforSubmitBank">保存</van-button>
           <van-button :class="isStatus ? '' : 'disabled'" size="large" @click="onSubmitCheck">保存</van-button>
        </div>
        <div class="tips">
          注意事项：<br />
          为了您的资金安全，请绑定持卡人本人的银行卡，确保持卡人姓名，身份证，银行开户人为同一个人。<br />
          银行预留的手机号是办理该银行卡时所填写的手机号码，若遗忘，换号请联系银行客服处理。<br />
          请填写真实信息，仅支持提现至储蓄卡<br />
        </div>
      <div class="add-toast">
        <van-dialog id="van-dialog"/>
        <van-toast id="van-toast" />
      </div>
    </div>
  </div>
</template>

<script>
import Bank from './bank.js'
import NavBar from '@/components/global/nav-bar.vue'
import { debounce } from 'throttle-debounce'

export default {
  components: { NavBar },
  data () {
    return {
      active: 1,
      u_id: '',
      u_name: '',
      bankcard_number: '',
      bank_name: '',
      bank_captcha: '',
      user_id_no: '',
      mobile: '',
      bank_code: '',
      showPopup: false,
      iscardError: false,
      ismobError: false,
      isSub: true,
      bankList: [],
      debounceNumber: null,
      isStatus: false
    }
  },
  created () {
    console.log(this.$route)
    this.u_id = this.$route.query.u_id
    this.bankList = Bank.list
    this.$dialog.alert({
      title: '持卡人说明',
      message: '为了资金安全，只能绑定当前持卡人的银行卡',
      confirmButtonText: '确定',
      className: 'dialog'
    }).then(() => {
      // on close
    })
  },
  mounted () {
    this.debounceNumber = debounce(700, (val) => {
      this.submitBank()
    })
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onbankList () { //  点击银行卡选择
      console.log(3333)
      this.showPopup = true
    },
    closePopup () { // 关闭下拉框
      this.showPopup = false
    },
    captchChange (value) {
      console.log(value)
      this.bank_captcha = value
    },
    cardChange (value) { // 卡号验证
      console.log(value)
      let reg = /^(\d{16}|\d{19})$/
      const val = value
      if (reg.test(val)) {
        this.bankcard_number = val
        return false
      } else {
        this.bankcard_number = val
        return true
      }
    },
    mobileChange (value) { // 号码验证
      let reg = /^1\d{10}$/
      const val = value
      if (reg.test(val)) {
        this.mobile = val
        return false
      } else {
        this.mobile = val
        return true
      }
    },
    bindGo (ags) { // 点击选择某一项银行卡
      this.showPopup = false
      this.bank_name = ags.bank_name
      this.bank_code = ags.bank_code
      this.checkForm()
    },
    checkForm () {
      var isStatus = false
      let uname = this.u_name
      console.log(uname.trim().length)
      // 验证姓名
      if (uname.trim().length > 0) {
        isStatus = true
      } else {
        isStatus = false
        return
      }
      // console.log(isStatus, '验证姓名')
      let cardreg = /^(\d{16}|\d{19})$/
      if (cardreg.test(this.bankcard_number)) {
        isStatus = true
      } else {
        isStatus = false
        return
      }
      // console.log(isStatus, '银行卡号')
      if (this.bank_code) {
        isStatus = true
      } else {
        isStatus = false
        return
      }
      // console.log(isStatus, '银行卡code')
      let mobilereg = /^1\d{10}$/
      if (mobilereg.test(this.mobile)) {
        isStatus = true
      } else {
        isStatus = false
        return
      }
      // console.log(isStatus, '手机号码')
      var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/
      if (reg.test(this.user_id_no)) {
        isStatus = true
      } else {
        isStatus = false
        this.isStatus = isStatus
        return
      }
      // console.log(isStatus, '身份证')
      // console.log(isStatus)
      this.isStatus = isStatus
    },
    // getCaptcha () { // 获取验证码
    //   Toast('验证码已发送，请您查收')
    //   var params = { //
    //   }
    //   return new Promise((resolve, reject) => {
    //     Fly.post(Fly.config.baseUrl + 'account_user_bankinfo', params).then(function (res) {
    //       if (res.return_code === '0000') {
    //
    //       } else {
    //         console.log(res.return_msg)
    //       }
    //       this.$toast.clear()
    //       resolve()
    //     }).catch((error) => {
    //       this.$toast.clear()
    //       console.log('请求失败', error)
    //     })
    //   })
    //   console.log(params)
    // },
    beforSubmitBank () {
      this.debounceNumber()
    },
    onSubmitCheck () {
      var isStatus = false
      let uname = this.u_name
      // 验证姓名
      if (uname.trim().length > 0) {
        isStatus = true
      } else {
        isStatus = false
        this.$toast('请输入持卡人姓名！')
        return
      }
      // console.log(isStatus, '验证姓名')
      let cardreg = /^(\d{16}|\d{19})$/
      if (cardreg.test(this.bankcard_number)) {
        isStatus = true
      } else {
        isStatus = false
        if (this.bankcard_number.length > 0) {
          this.$toast('银行卡号格式不正确！')
        } else {
          this.$toast('请输入银卡开号！')
        }
        return
      }
      // console.log(isStatus, '银行卡号')
      if (this.bank_code) {
        isStatus = true
      } else {
        this.$toast('请选择所在银行！')
        isStatus = false
        return
      }
      // console.log(isStatus, '银行卡code')
      let mobilereg = /^1\d{10}$/
      if (mobilereg.test(this.mobile)) {
        isStatus = true
      } else {
        isStatus = false
        if (this.mobile.length > 0) {
          this.$toast('手机号码格式不正确！')
        } else {
          this.$toast('请输入银行预留手机号码！')
        }
        return
      }
      // console.log(isStatus, '手机号码')
      var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/
      if (reg.test(this.user_id_no)) {
        isStatus = true
      } else {
        isStatus = false
        this.isStatus = isStatus
        if (this.user_id_no.length > 0) {
          this.$toast('身份证号码格式不正确！')
        } else {
          this.$toast('请输入身份证号码！')
        }
        return
      }
      this.submitBank()
    },
    submitBank () {
      this.isSub = false
      this.$toast.loading({ forbidClick: true, duration: 0, position: 'middle' })
      var data = { // uid 需要处理取用户id
        uid: this.u_id,
        user_name: this.u_name,
        user_id_no: this.user_id_no,
        bankcard_number: this.bankcard_number,
        bank_name: this.bank_name,
        mobile: this.mobile,
        bank_code: this.bank_code
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_bankinfo', data, method: 'post' }).then((res) => { // 请求成功
          if (res.return_code === '0000') {
            this.$toast.success(res.data)
            this.$router.go(-1)
            // this.$router.back(0)
          } else {
            this.$toast(res.return_msg)
            // this.$router.go(-1)
          }
          resolve(res)
        }).catch((error) => { // 请求失败
          this.$toast.success('请求失败！')
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// .captch{position:absolute!important;top:10px;right:10px;width:80px!important;height:26px!important;line-height:25px!important;font-size:12px!important;background-color:#e91f3f!important;color:#fff!important;padding:0!important}
.add-warp{background-color: #ffffff;}
.add-warp .van-button.captch {
  position: absolute !important;
  right: 0px;
}
.add-warp .getcode {
  position: relative;
}
.bank_list_box {
  height: 460px; overflow: scroll;
}
.bank-list{height:40px;line-height:40px;border-bottom:1px solid #f0f0f0;align-content:center}
.bank-item-text{display:inline-block;padding:0 0 0 15px;font-size:15px;color:#666}
.close-card{position:absolute;left:10px;top:5px}
.bank-popup-card{position:relative;z-index:2011;text-align:center;height:40px;line-height:40px;border-bottom:solid 1px #f0f0f0;align-content:center}
.bank-popup-title{display:inline-block;color:#000;font-size:19px;text-align:center}
.bank-img{position:relative;top:5px;left:0;width:22px;height:22px;}
.van-button.disabled {
  opacity: 1; background: #D0D0D0 !important;
}
.tips {
  padding: 15px; margin-top: 40px;
  color: #999999; font-size: 12px;
}
</style>
